<script setup>
  import { ref } from 'vue'
  import { getOrderDetailApi } from '@/server/address'
  // 获取订单详情
  const props = defineProps(['id'])

  // 订单详情
  const orderDetail = ref({})

  async function getDetailInfo() {
    console.log(props.id)
    const { data } = await getOrderDetailApi(props.id)
    orderDetail.value = data.data
  }
  getDetailInfo()

  // 订单状态
  const orderStatus = ref({
    10: '待支付',
    11: '待发货',
    12: '待收货',
    13: '已完成',
    14: '已取消',
  })

  function onToTimelinefn() {
    uni.navigateTo({
      url: '/subpack_medicue/timeLine/timeLine?id=' + orderDetail.value.id,
    })
  }
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-status" @click="onToTimelinefn">
          <text class="label">药品订单 {{ orderDetail.actualPayment }}元</text>
          <text class="status">{{ orderStatus[orderDetail.status] }} </text>
        </view>

        <view class="order-shippment">
          <template v-if="orderDetail.status === 11">
            <view class="region">
              <text class="iconfont icon-location"></text>
              {{ orderDetail.addressInfo.city }}
            </view>
            <view class="detail">{{
              orderDetail.addressInfo.addressDetail
            }}</view>
            <view class="receiver"
              >{{ orderDetail.addressInfo.receiver }}
              {{ orderDetail.addressInfo.mobile }}</view
            >
          </template>

          <template v-if="orderDetail.status === 12">
            <navigator hover-class="none" url=" ">
              <view class="marker">【东莞市】您的包裹已签收</view>
              <view class="datetime">2019-07-14 17:42:12</view>
              <view class="arrow">
                <uni-icons size="18" color="#C3C3C5" type="forward" />
              </view>
            </navigator>
          </template>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view
          class="medicine-list-item"
          v-for="item in orderDetail.medicines"
          :key="item.id"
        >
          <image class="medicine-cover" :src="item.avatar" mode="aspectFill" />
          <view class="medicine-info">
            <text class="name">{{ item.name }}</text>
            <text class="unit symbol">{{ item.specs }}</text>
            <text class="price">¥{{ item.amount }}</text>
          </view>
          <view class="quantity">x{{ item.quantity }}</view>
          <view class="guide">{{ item.usageDosag }}</view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item
            title="药品金额"
            :right-text="`¥${orderDetail.actualPayment}`"
          />
          <uni-list-item
            title="运费"
            :right-text="`¥${orderDetail.expressFee}`"
          />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${orderDetail.couponDeduction}`"
          />
          <uni-list-item
            title="实付款"
            :right-text="`¥${orderDetail.actualPayment}`"
          />
          <uni-list-item title="订单编号" :right-text="orderDetail.id" />
          <uni-list-item
            title="创建时间"
            :right-text="orderDetail.createTime"
          />
          <uni-list-item title="支付方式" right-text="支付宝支付" />
        </uni-list>
      </view>

      <view v-if="orderDetail.status === 10" class="notice-bar">
        <uni-notice-bar text="请在 00:14:59 内完成支付，超时订单将取消" />
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <template v-if="false">
          <view class="total-amount">
            需付款: <text class="number">¥39.00</text>
          </view>
          <view class="buttons">
            <button class="uni-button minor">取消问诊</button>
            <button class="uni-button">立即支付</button>
          </view>
        </template>
        <template v-else>
          <view class="buttons">
            <view class="delete-botton">
              <uni-icons size="24" color="#848484" type="trash" />
              <text>删除订单</text>
            </view>
            <button class="uni-button">再次购买</button>
          </view>
        </template>
      </view>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
